<template>
	<view class="hom">
		<!-- 轮播图 -->
		<swiper class="swiper" indicator-dots autoplay circular indicator-active-color="rgb(234 232 232 / 82%)">
			<swiper-item v-for="(item,index) in CarouselMap" :key="index">
				<image :src="item.image_src" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<!-- 导航 -->
		<view class="Navigation">
			<image :src="item.image_src" @click="natiaoz(index)" v-for="(item,index) in Navigation" :key="index"></image>
		</view>
		<!-- 推荐商品 -->
		<view class="PickOfTheWeek">
			<view class="PickOfTheWeek_text" >推荐商品</view>
		</view>
		<!-- 商品列表 -->
		<goodslist :GoodsList="GoodsList" v-if="GoodsList.length > 0"></goodslist>
	</view>
</template>

<script>
	import goodslist from '../../components/goodslist/goodslist.vue'
	export default {
		data() {
			return {
				CarouselMap: [],
				Navigation: [],
				GoodsList: []
			}
		},
		onLoad() {
			this.hqulbtu()
		},
		components:{
			goodslist
		},
		methods: {
			//获取首页数据
			async hqulbtu() {
				this.GoodsList.length = 0
				let {
					data: res
				} = await this.$http.lunbtu()
				let {
					data: res2
				} = await this.$http.getnavigation()
				let {
					data: res3
				} = await this.$http.getgoodslist()
				this.CarouselMap = res.message
				this.Navigation = res2.message
				// this.GoodsList = res3.message
				 res3.children = res3.message
				//  console.log(res3)
				 this.getnodedev(res3, this.GoodsList)
				 uni.setStorageSync('GoodsList', res3.message);
			},
			
			//递归循环三级商品列表
			getnodedev(data, arr) {
				if (!data.children) {
					arr.push(data)
					return
				}
				data.children.forEach(item => {
					this.getnodedev(item, arr)
				})
			},
			natiaoz(i){
				console.log(i)
				if(i == 0){
					uni.navigateTo({
					    url: '../goodslis/goodslis'
					});
				}else if(i == 1){
					uni.navigateTo({
					    url: '../contact/contact'
					});
				}else if(i == 2){
					uni.navigateTo({
					    url: '../pics/pics'
					});
				}
				
			},

		}
	}
</script>

<style scoped>
	
	.swiper {
		width: 750rpx;
		height: 340rpx;
	}

	.swiper image {
		width: 100%;
		height: 100%;
	}

	.Navigation {
		
		margin-top: 20rpx;
		display: flex;
		justify-content: space-around;
	}

	.Navigation image {
		width: 128rpx;
		height: 140rpx;

	}

	.PickOfTheWeek {
		width: 100%;
		background: #eee;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.PickOfTheWeek .PickOfTheWeek_text {
		background: #fff;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		letter-spacing: 30rpx;
		color: #b50e03;
		margin: 7rpx 0;
	}
	
</style>
